<template>
  <van-pull-refresh
          v-model="loading"
          success-text="刷新成功"
          @refresh="onRefresh"
  >

    <van-nav-bar
            title="美食"
            left-text="返回"
            right-text="搜索"
            left-arrow
            @click-left="onClickLeft"
            @click="ser"
    />

  <van-notice-bar
          left-icon="volume-o"
          text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。"
  />
<!--轮播图-->
<div id="div1">
  <van-swipe :autoplay="3000" lazy-render>
    <van-swipe-item v-for="image in images" :key="image">
      <img class="img1" :src="image" />
    </van-swipe-item>
  </van-swipe>
</div>

  <!--格子-->
    <div>
      <van-grid :gutter="10" clickable direction="horizontal" :column-num="2">
        <van-grid-item icon-color="red" icon="fire-o" text="日料" to="/foodsTypeList?t=1" />
        <van-grid-item icon-color="blue" icon="flower-o" text="西餐" to="/foodsTypeList?t=2" />
        <van-grid-item icon-color="yellow" icon="smile-o" text="川菜" to="/foodsTypeList?t=3" />
        <van-grid-item icon-color="pink" icon="hot-o" text="快餐" to="/foodsTypeList?t=4" />
      </van-grid>
    </div>

    <van-divider content-position="left"  :style="{ color: 'red', borderColor: '#1989fa' }">综合排名美食：</van-divider>

  <!--列表-->
  <div v-for="f in foods">
      <van-card
              :tag="f.type"
              :price="f.price"
              :desc="f.site"
              :title="f.name"
              :thumb="f.imgurl"

      >
        <template #tags>
          <van-tag plain type="danger">浏览量 {{f.looknum}}</van-tag>
          <van-tag plain type="danger">评分值 {{f.lovenum}}</van-tag>
        </template>
        <template #footer>

          <van-button  @click="tzdetail(f.id)" size="mini" style="height: 2rem;background-color: crimson">查看详情</van-button>
        </template>
      </van-card>


  </div>

  </van-pull-refresh>
</template>


<script>
  import { ref } from 'vue';
  import { Toast } from 'vant';

  export default {
    name: 'FoodView',
    data() {
      return {

        foods:[],
      }
    },
    mounted() {
      this.axios.get("/api/foods/listall.do").then(res=>{
        if(res.data.code==200){
          this.foods=res.data.data;
        }
      });
    },
    methods: {

      /*导航*/
      onClickLeft () {
        history.back();
      },
      tzdetail(id){
        //跳转页面 传递参数 编程式路由 携带参数
        this.$router.push({path:"/foodeditview",query:{id:id}});
      },
      ser(){
        this.$router.push({path:"/foodsList",query:{}});
      }
    },
    setup() {
      /*刷新*/
      const count = ref(0);
      const loading = ref(false);
      const onRefresh = () => {
        setTimeout(() => {
          Toast('刷新成功');
          loading.value = false;
          count.value++;
        }, 1000);
      };

      /*轮播*/
      const images = [
        'https://img1.baidu.com/it/u=3032534466,1205245741&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=280',
        'https://img1.baidu.com/it/u=2934425598,1763531171&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=335',
        'https://img1.baidu.com/it/u=1571747673,1940859270&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=310',
      ];
      return {
        images,
        loading,
        onRefresh,
      };
    },
  }
</script>

<style scoped>
  .img1{
    height: 12rem;
    width: auto;
  }
  .clickLike {
    padding: 10px 0;
    position: relative;
  }


</style>